<template>
  <div class="time-box" >
    <p class="cmtitle">选择时间段</p>
    <div class="time-b flex">
      <div v-for="item in reservePeriodList"
      @click="setC(item)" :key="item.id"
       class="time-item flex jcc alc"
       :class="curIndex===item.id?'cur':''"
       >{{item.starttime.slice(-8,-3)}} - {{item.endtime.slice(-8,-3)}}</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getReservePeriodList } from '@/http/protocol'

export default {
  name: 'timecomp',
  data () {
    return {
      curIndex: null,
      reservePeriodList: []
    }
  },
  computed: {
    ...mapState('ticketinfo', ['ticket', 'reservedate'])
  },
  methods: {
    ...mapMutations('ticketinfo', ['setPeriod']),

    setC (item) {
      this.curIndex = item.id
      this.setPeriod({ ...item })
    },
    async getReservePeriodList (reservedate) {
      const param = {
        scheduleId: this.ticket.id,
        reservedate
      }
      // console.log(param)
      const res = await getReservePeriodList(param)
      if (res.success) {
        const { reservePeriodList = [] } = res.data
        this.reservePeriodList = reservePeriodList
        if (reservePeriodList.length > 0) {
          this.setC((reservePeriodList[0] || {}))
        }
        // console.log(reservePeriodList)
      } else {
        this.$err(res.msg)
      }
    }
  },
  watch: {
    reservedate (val = {}) {
      // console.log(val)
      if (val) {
        this.getReservePeriodList(val.reservedate)
      }
    }
  }
}
</script>

<style scoped lang="less">
.time-box {
  padding-top: 32px;
  .cmtitle {
    margin-bottom: 8px;
  }
  .time-item {
    width: 422px;
    height: 72px;
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #e6e6e6;

    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 20px;

    cursor: pointer;
    &:hover {
background: rgba(0, 151, 105, 0.1);
    border: 1px solid #009769;
     }
    &:nth-child(odd) {
      margin-right: 14px;
    }
  }
  .cur {
background: rgba(0, 151, 105, 0.1);
    border: 1px solid #009769;
    color:#009769;
  }
}
</style>
